<!DOCTYPE html>
<html>
<head>
<title>Physics Diagram</title>
</head>
<body>
<canvas id="physicsCanvas" width="550" height="420"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Style settings
    ctx.lineWidth = 2;
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.font = "24px 'Times New Roman'";
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // Helper function to draw an arrowhead
    function drawArrowhead(ctx, x, y, size) {
        ctx.beginPath();
        ctx.moveTo(x, y);
        ctx.lineTo(x - size, y - size / 2);
        ctx.moveTo(x, y);
        ctx.lineTo(x - size, y + size / 2);
        ctx.stroke();
    }

    // --- Define Geometry ---
    // Block C
    const c_w = 300;
    const c_h = 150;
    const c_x = 120;
    const c_y = 170;

    // Block A
    const a_w = 80;
    const a_h = 40;
    const a_x = 250;
    const a_y = c_y - a_h;

    // Block B
    const b_w = 50;
    const b_h = 50;

    // Pulley
    const pulley_r = 15;
    const pulley_x = c_x + c_w;
    const pulley_y = a_y + a_h / 2 + pulley_r;

    // String
    const string_y = a_y + a_h / 2;
    const string_x_vertical = pulley_x + pulley_r;
    
    // Block B position
    const b_x = string_x_vertical - b_w / 2;
    const b_y = 220;

    // Force F
    const f_y = c_y + c_h / 2;
    const f_start_x = 40;
    const f_end_x = c_x;

    // --- Draw components ---

    // 1. Draw Ground
    const ground_y = c_y + c_h;
    ctx.beginPath();
    ctx.moveTo(50, ground_y);
    ctx.lineTo(500, ground_y);
    ctx.stroke();
    // Hatching for the ground
    for (let i = 0; i < 11; i++) {
        ctx.beginPath();
        ctx.moveTo(70 + i * 40, ground_y);
        ctx.lineTo(90 + i * 40, ground_y + 20);
        ctx.stroke();
    }

    // 2. Draw Block C
    ctx.beginPath();
    ctx.rect(c_x, c_y, c_w, c_h);
    ctx.stroke();
    ctx.fillText('C', c_x + 100, c_y + c_h / 2);

    // 3. Draw Block A
    ctx.beginPath();
    ctx.rect(a_x, a_y, a_w, a_h);
    ctx.stroke();
    ctx.fillText('A', a_x + a_w / 2, a_y + a_h / 2);

    // 4. Draw Block B
    ctx.beginPath();
    ctx.rect(b_x, b_y, b_w, b_h);
    ctx.stroke();
    ctx.fillText('B', b_x + b_w / 2, b_y + b_h / 2);

    // 5. Draw Pulley
    ctx.beginPath();
    ctx.arc(pulley_x, pulley_y, pulley_r, 0, 2 * Math.PI);
    ctx.stroke();
    // Pulley axle
    ctx.beginPath();
    ctx.arc(pulley_x, pulley_y, 2, 0, 2 * Math.PI);
    ctx.fill();

    // 6. Draw String
    ctx.beginPath();
    ctx.moveTo(a_x + a_w, string_y); // from A
    ctx.lineTo(pulley_x, string_y); // to pulley
    ctx.arc(pulley_x, pulley_y, pulley_r, -Math.PI / 2, 0); // around pulley
    ctx.lineTo(string_x_vertical, b_y); // down to B
    ctx.stroke();

    // 7. Draw Force F
    ctx.beginPath();
    ctx.moveTo(f_start_x, f_y);
    ctx.lineTo(f_end_x, f_y);
    ctx.stroke();
    drawArrowhead(ctx, f_end_x, f_y, 10);
    ctx.font = "italic 24px 'Times New Roman'";
    ctx.fillText('F', f_start_x - 20, f_y);

    // 8. Draw Caption
    ctx.font = "20px 'Songti SC', 'SimSun'";
    ctx.fillText('习题 1-31 图', canvas.width / 2, 380);

</script>
</body>
</html>